<template>
  <div class="console-panel">
    <el-tabs v-model="active">
      <el-tab-pane v-for="item in tabs" :key="item.name" :name="item.name" :label="item.title">
        <!-- <div>{{active}}</div>
        <div>{{item}}</div>-->
        <!-- TODO keep-alive效果不明显 -->
        <keep-alive>
          <component :is="active === item.name ? item.name : false" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// vue标签页(Tabs)最佳实践
// https://zhuanlan.zhihu.com/p/75735864
import Terminal from './components/terminal'
import Command from './components/command'

export default {
  // 注册子组件
  components: {
    Terminal,
    Command
  },
  data() {
    return {
      active: 'Command',
      tabs: [
        {
          name: 'Terminal',
          title: '控制台'
        },
        {
          name: 'Command',
          title: '命令行'
        }
      ]
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss">
@import '../../style/variable.scss';
.console-panel {
  height: 100%;
  // padding: 1px 0 0 1px;
  background-color: #ffffff;

  .el-tabs--top {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .el-tabs__header {
    margin: 0 !important;
    height: 30px !important;
    @extend %toolbar-color2;
    // background-color: #e2e6ec;
  }

  .el-tabs__item {
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px !important;
    padding: 0 20px !important;
  }

  .el-tabs--top :nth-child(2).el-tabs__item.is-top,
  .el-tabs--top :nth-child(2).el-tabs__item.is-bottom,
  .el-tabs--bottom :nth-child(2).el-tabs__item.is-top,
  .el-tabs--bottom :nth-child(2).el-tabs__item.is-bottom {
    padding-left: 0px !important;
  }

  // .el-tabs__active-bar {
  //   height: 1px !important;
  // }

  .el-tabs--top :last-child.el-tabs__item.is-top,
  .el-tabs--top :last-child.el-tabs__item.is-bottom,
  .el-tabs--bottom :last-child.el-tabs__item.is-top,
  .el-tabs--bottom :last-child.el-tabs__item.is-bottom {
    padding-right: 0px !important;
  }

  .el-tabs__nav-wrap {
    transform: translateX(10px) !important;
    margin-bottom: 0px !important;
  }

  // tab的header下边框
  .el-tabs__nav-wrap::after {
    height: 1px !important;
  }

  // content使用flex布局填满高度
  .el-tabs__content {
    flex: 1 !important;
    .el-tab-pane {
      height: 100% !important;
    }
  }

  // 有些情况下tab会显示方框,去掉它
  // https://blog.csdn.net/daipianpian/article/details/103323733
  .el-tabs__item:focus.is-active.is-focus:not(:active) {
    box-shadow: none !important;
  }

  // @import '../../style/panel.scss';
}
</style>
